<template>
	<view class="container">
		<view class="title">{{$t('inspection.taskPlan.seeTrend')}}</view>
		<view id="echart" class="charts" :prop="chartData" :change:prop="echarts.updateEcharts"></view>
	</view>
</template>

<script>
	export default {	
		props: {
			chartData: {
				type: Object,
				default() {
					return { }
				}
			}
		},
		data() {
			return {
				
			}
		}
	}
</script>

<script module="echarts" lang="renderjs">
	export default {
		data() {
			return {
				script: ""
			}
		},
		mounted() {	
			if (typeof window.echarts === 'object') {
				this.drawChart()
			} else {
				this.script = document.createElement('script')
				this.script.src = './static/libs/echarts.min.js'
				this.script.onload = this.drawChart
				document.head.appendChild(this.script)
			}
		},
		methods: {
			drawChart() {
				let categories = this.chartData.categories;
				let series = this.chartData.series;
				
				let myChart = echarts.init(document.getElementById('echart'));
				let option={
					grid: {
						left: '8%',
						top:'8%',
						right:'1%',
						bottom:'40%'
					},
					xAxis: {
						 axisLabel:{
						   interval:0,
						   rotate:70,//倾斜度 -90 至 90 默认为0
						   margin:5,
						   textStyle:{
								color:"#999",
								fontSize:'12px'
						   }
						 },
						type: 'category',
						data: categories
					},
					yAxis: {
						type: 'value',
					},
					series: [{
						data: series,
						type: 'line',
						symbol:'circle',//拐点设置为实心
						symbolSize:8,//拐点大小
						itemStyle : {
							normal : {
								color:'#1e90e6',
								lineStyle:{
									color:'#1e90e6'
								},
								label: {
									show: true,
								}
							}
						}
					}]
				}
				myChart.setOption(option)
			},
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				// 监听 service 层数据变更
				this.chartData = newValue
				// this.script.onload = this.drawChart
				// document.head.appendChild(this.script)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #FFFFFF;
	}
	
	.title {
		font-size: 16px;
		padding: 10px
	}
	
	.charts {
		width: 350px;
		height: 300px;
		background-color: #FFFFFF;
	}
</style>
